<template>
<div class="appoint">
  <h1 style="color: #ffffff ; letter-spacing: 0.1em">当前值班医生</h1>

  <div class="searchBar">
   <el-row :gutter="50" justify="center">

      <el-col :span="5">
        <div class="search-inner">
          <span>科系</span>
          <el-input clearable placeholder="搜索科系" v-model="searchData.subject"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="search-inner">
          <span>职称</span>
          <el-input clearable placeholder="搜索职称" v-model="searchData.proTitle"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
         <div class="search-inner">
           <span >医生</span>
           <el-input clearable placeholder="搜索医生" v-model="searchData.name"></el-input>
         </div>
      </el-col>

     <el-col :span="2">
       <div class="search-inner">
         <el-button size="small" icon="fa fa-search fa-lg" @click="searching">搜索</el-button>
       </div>
     </el-col>

   </el-row>
  </div>
  <el-table
      :data="tableData"
      style="width: 100%;" highlight-current-row
  >
    <el-table-column label="id" prop="docId" align="center" :sortable="true"></el-table-column>
    <el-table-column label="科室" prop="subject" align="center"> </el-table-column>
    <el-table-column label="医生" prop="name" align="center"> </el-table-column>
    <el-table-column label="职称" prop="proTitle" align="center"> </el-table-column>
    <el-table-column label="诊室" prop="roomNo" align="center"> </el-table-column>
    <el-table-column label="当前候诊人数" prop="amount" align="center" :sortable="true"> </el-table-column>
    <el-table-column align="center">
      <template #header>
        <span>操作</span>
      </template>
      <template #default="scope">
        <el-button size="mini" type="primary" @click="goto2Appointment(scope)"
        >预约挂号</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination layout="prev, pager, next ,sizes,jumper" :total="searchData.total" background
    :page-sizes="sizes" :current-page="searchData.page" prev-text="上一页" next-text="下一页" :page-size="searchData.size"
                   @current-change="changeCurrent" @size-change="changeSize"
    > </el-pagination>
  </div>

  <el-drawer  title="挂号信息确认" direction="ttb" destroy-on-close v-model="showDrawer" size="420px">
    <span>Tips:不同职称医生，挂号收费有所变化</span>
    <div class="drawer">
      <div class="me">
        <el-descriptions title="挂号人" direction="vertical" :column="4" border>
          <el-descriptions-item label="姓名"  align="center">{{me.name}}</el-descriptions-item>
          <el-descriptions-item label="性别" align="center">{{me.sex}}</el-descriptions-item>
          <el-descriptions-item label="年龄" align="center">{{me.age}}</el-descriptions-item>
          <el-descriptions-item label="联系电话" align="center">
            {{me.tel}}
          </el-descriptions-item>
          <el-descriptions-item label="症状" align="center">
            <el-input placeholder="请输入症状" v-model="appointData.symptom"></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="doctor">
        <el-descriptions title="医生" direction="vertical" :column="4" border>
          <el-descriptions-item label="id"  align="center">{{selectedDr.docId}}</el-descriptions-item>
          <el-descriptions-item label="姓名"  align="center">{{selectedDr.name}}</el-descriptions-item>
          <el-descriptions-item label="科室" align="center">{{selectedDr.subject}}</el-descriptions-item>
          <el-descriptions-item label="职称" align="center">{{selectedDr.proTitle}}</el-descriptions-item>
          <el-descriptions-item label="诊室" align="center">
            <el-tag size="small">{{selectedDr.roomNo}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="当前候诊人数" align="center">
            <span>{{selectedDr.amount}}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="appointBtn">
      <el-button round class="hvr-bob" type="primary" @click="appointNow">挂号</el-button>
    </div>
    <transition name="payCard">
      <el-card v-show="payCardShow" class="paycard">
        <template #header>
          <div class="box-header">
            <span>请选择支付方式</span>
            <el-button type="text" class="hvr-grow" @click="payCardShow=!payCardShow">X</el-button>
          </div>
        </template>
        <div class="box-main">
          <div>
            挂号费: <span style="font-size: 30px;">¥{{selectedDr.appoPrice}}</span>
          </div>
          <div class="pay_type">
            <el-button type="success" @click="pay">现金</el-button>
            <el-button type="primary">二维码</el-button>
          </div>
        </div>
      </el-card>
    </transition>
  </el-drawer>
</div>
</template>

<script>
import {ElMessage} from "element-plus";
import {appoint, getAppointInfo} from "../../api/api";
import {debounce} from 'lodash-es'

export default {
  name: "Index",
  computed:{
    getSubject : function (){
      return this.searchData.subject
    },
    getName:function (){
      return this.searchData.name
    },
    getProTitle:function (){
      return this.searchData.proTitle
    },
  },
  watch:{
    getSubject:{
        handler:function (){
          this.searching()
        }
    },
    getName:{
      handler:function (){
        this.searching()
      }
    },
    getProTitle:{
      handler:function (){
        this.searching()
      }
    }
  },
  mounted() {
    this.me = this.$store.state.user.me
    this.tableData = []
    getAppointInfo({
      ...this.searchData
    },{
      "satoken": localStorage.getItem("satoken")
    })
    .then(res=>{

      this.tableData = res.records
      this.searchData.total = res.total
      this.searchData.page = res.current
      this.searchData.size = res.size

    })
    .catch(err=>{
      console.log(err)
    })

  },
  methods:{
    changeSize:debounce(function (value){
      this.searchData.size = value
      this.tableData.length = 0
      getAppointInfo({
        ...this.searchData
      },{
        "satoken": localStorage.getItem("satoken")
      })
          .then(res=>{
            this.tableData = res.records
            if(res.records.length === 0){
              ElMessage.warning({
                type:'warning',
                message: '暂无数据'
              })
            }
            ElMessage.success({
              type:'success',
              message: '查找成功'
            })
            this.searchData.total = res.total
          })
          .catch(err=>{
            console.log(err)
            ElMessage.error({
              type: 'error',
              message: '查找失败'
            })
          })
    },500),
    changeCurrent:debounce(function (value){
      this.searchData.page = value
      this.tableData.length = 0
      getAppointInfo({
        ...this.searchData
      },{
        "satoken": localStorage.getItem("satoken")
      })
          .then(res=>{
            console.log(res)
            this.tableData = res.records
            this.searchData.total = res.total
            if(res.records.length === 0){
              ElMessage.warning({
                type:'warning',
                message: '暂无数据'
              })
            }
            ElMessage.success({
              type:'success',
              message: '查找成功'
            })
          })
          .catch(err=>{
            console.log(err)
            ElMessage.error({
              type: 'error',
              message: '查找失败'
            })
          })
    },500),
    searching:debounce(function (){
      this.tableData.length = 0
      this.searchData.page = 1
      this.searchData.size = 5
      getAppointInfo({
        ...this.searchData
      },{
        "satoken": localStorage.getItem("satoken")
      })
          .then(res=>{
            this.tableData = res.records
            this.searchData.total = res.total
            if(res.records.length === 0){
              ElMessage.warning({
                type:'warning',
                message: '暂无数据'
              })
            }
          })
          .catch(err=>{
            console.log(err)
            ElMessage.error({
              type: 'error',
              message: '查找失败'
            })
          })
    },500),
    goto2Appointment(scope){
      this.selectedDr = scope.row

      if (this.selectedDr.proTitle === '教授'){
        this.appointData.appoPrice = this.selectedDr.appoPrice = 50

      }else if(this.selectedDr.proTitle === '副教授'){
        this.appointData.appoPrice = this.selectedDr.appoPrice = 35
      }else if (this.selectedDr.proTitle === '主任'){
        this.appointData.appoPrice = this.selectedDr.appoPrice = 20
      }else if(this.selectedDr.proTitle === '副主任'){
        this.appointData.appoPrice = this.selectedDr.appoPrice = 15
      }
      else
        this.appointData.appoPrice = this.selectedDr.appoPrice = 10

      this.showDrawer = true
    },

    appointNow(){
      this.payCardShow = !this.payCardShow
    },
    pay(){


      this.appointData.docId = this.selectedDr.docId

      appoint({
        ...this.appointData
      },{
        "satoken": localStorage.getItem("satoken")
      }).then(res=>{
        if (res.code===200){
          ElMessage.success({
            type: 'success',
            message: res.msg
          })
          this.showDrawer = !this.showDrawer
        }
        else{
          this.$alert(res.msg,'错误',{
            confirmButtonText: '确定',
            type: 'error',
            center: true
          })
        }

      }).catch(err=>{
        ElMessage.error({
          type:'error',
          msg: '系统错误'
        })
      })
    },
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  data(){
    return{

      payCardShow: false,

      appointData:{
        docId:0,
        symptom: '',
        appoPrice: '',
      },

      me:{},
      showDrawer: false,
      searchData:{
        page: 1,
        size: 5,
        total: 10,
        subject:'',
        proTitle:'',
        name:'',
      },
      selectedDr:{},
      sizes: [1,2,5,8,10],
      tableData: [
        {},
      ],
      search: '',
    }
  }
}
</script>

<style scoped>
.pay_type{

}
.box-main{
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.payCard-enter-active{
  animation: fadeIn .5s;
}

.payCard-leave-active{
  animation: fadeOut .5s;
}


.paycard{
  z-index: 100;
  width: 600px;
  height: 250px;
  position: absolute;
  left: 30%;
  top: 25%;
}
.appointBtn{
  margin-left: 100px;
  margin-top: 20px;
}
.drawer{
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
}
.doctor{
  width: 500px;
}
.me{
  width: 600px;
  margin-left: 20px;
}
.search-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-inner .el-button:hover{
  animation: headShake 1s;
}

.search-inner span{
  font-size: 20px;
  display: block;
  width: 80px;
  height: inherit;
  color: #f4f4f5;
}
.searchBar{
  width: 90%;
  height: auto;
  padding: 0 0 20px 0;
}
.block{
  margin-top: 20px;
  background: rgba(255,255,255,.8);

}

::v-deep(.el-table tr){

  font-size: 20px;
}
.appoint{

  position: relative;
  width: 100%;
  height:600px;
}
</style>
